import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { Breadcrumb, Row, Col, Form, Input, Button, Table, Modal, Radio, Divider } from 'antd';
import axios from 'axios'
import ExportJsonExcel from 'js-export-excel';
// import qs from 'qs'
// import Fetch from "../../../common/Fetch"
import { SearchOutlined, DiffOutlined, ExclamationCircleOutlined, ThunderboltFilled } from '@ant-design/icons';
import { useForm } from 'antd/lib/form/Form';
const { confirm } = Modal;
const { Search } = Input;
// const [formmodal]=useForm()
const ChuYuanBingRenXinXi = () => {
    const [zhuyuanhao, setZhuyuanhao] = useState("111")
    const [name, setName] = useState("222")
    //复选框：
    const [selectionType, setSelectionType] = useState('checkbox');
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            //   console.log( 'selectedRows: ', selectedRows);
            let idArr = selectedRows.map((item, index) => {
                return item.zhuYuanHao
            })
            console.log(idArr)
            // sessionStorage.setItem("idArr", JSON.stringify(idArr))
            sessionStorage.setItem("selectedRows", JSON.stringify(selectedRows))

        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            name: record.name,
        }),
    };
    //表格
    const [tableData, setTableData] = useState([])
    const [nowPage, setPage] = useState(1)
    const [pos, setBaseData] = useState(["bottomRight"]);
    //当状态发生改变时，都会自动去调用useEffect(),执行里面的函数
    useEffect(() => {
            getTableData(1);
        
    }, [Table])
    //page查询：
    const getTableData = () => {
        axios("/bingRenFeiYong/fenYeChaXun", {
            method: "post",
            headers: { "Content-Type": "application/json;charset=UTF-8" },
            params: { page: nowPage }
        })
            .then(res => {
                // console.log(res)
                let arr = res.data.list
                //数据总条数
                let count = res.data.count
                sessionStorage.setItem("count", JSON.stringify(count))
                for (let i = 0; i < arr.length; i++) {
                    arr[i].keMuMa = arr[i].fenHuYiLiaoFeiYongRiJiZhang.keMuMa
                    arr[i].xingMing = arr[i].ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    arr[i].keBie = arr[i].ruYuanBingRenJiBenZiLiaoDengJi.keBie
                    arr[i].chuYuanFou = arr[i].chuYuanFou == "0" ? "否" : "是"
                    arr[i].zhiChuJinE = arr[i].zhiChuJinE + "元"
                    arr[i].yiJiaoFeiYong = arr[i].yiJiaoFeiYong + "元"
                    // arr[i].count=res.data.count
                    arr[i].key = i + 1

                }
                console.log(arr);
                setTableData(arr)
            })
            .catch(err => {
                console.log(err)
            })
    }
    const xiuGai = (zhuYuanHao) => {
        console.log(zhuYuanHao);

    }
    //多选框打印操作：
    const dayin = () => {
        //获取选中的所有行的信息


    }
    const [form]=Form.useForm()
    //每一条数据后归档操作：
    const file = (record) => {
        // console.log(record);
        setIsModalVisible(true);
        sessionStorage.setItem("zhuYuanHao", JSON.stringify(record.zhuYuanHao))
        setZhuyuanhao(record.zhuYuanHao)
        setName(record.ruYuanBingRenJiBenZiLiaoDengJi.xingMing)
        let formdata={}
        formdata.zhuYuanHao=record.zhuYuanHao
        formdata.xingMing=record.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
        form.setFieldsValue(formdata)
    

    }
    //模态框取消确认按钮：
    const handleOk = () => {
        //点击模态框关闭
        setIsModalVisible(false);
        let id=JSON.parse(sessionStorage.getItem("zhuYuanHao"))
        console.log(id);
        
        axios("/guiDang/guiDang",{
            method:"post",
            headers: { "Content-Type": "application/json;charset=UTF-8" },
            params:{zhuYuanHao:id}
        })
        .then(res=>{
            if(res.data.code===200){
               getTableData(1);
            }
        })
        .catch((err)=>{
            console.log(err);
        })
        //传住院号归档
    };
    const handleCancel = () => {
        //点击模态框关闭
        setIsModalVisible(false);
    };
        //筛选：
    // const getRandomuserParams = params => ({
    //     results: params.pagination.pageSize,
    //     page: params.pagination.current,
    //     ...params,
    //   });e
    const handleTableChange=()=>{
        let chuYuanFou=JSON.parse(sessionStorage.getItem("value"))
        console.log(chuYuanFou);
        // console.log(pagination);
        // console.log(filters);
        // console.log(sorter);
        axios("/bingRenFeiYong/fenYeChaXunShaiXuan",{
            method:"post",
            headers: { "Content-Type": "application/json;charset=UTF-8" },
            params:{chuYuanFou:chuYuanFou,page:nowPage}
        })
        .then((res)=>{
            if(res.data.code===200){
                // console.log(res);
                let arr1=res.data.list
                //数据总条数
                let count = res.data.count
                sessionStorage.setItem("count", JSON.stringify(count))
                for (let i = 0; i < arr1.length; i++) {
                    // arr[i].count=res.data.count
                    arr1[i].key = i + 1
                    arr1[i].zhuYuanHao=res.data.list[i].zhuYuanHao
                    arr1[i].chuYuanFou=res.data.list[i].chuYuanFou
                    arr1[i].keBie=res.data.list[i].ruYuanBingRenJiBenZiLiaoDengJi.keBie
                    arr1[i].xingMing=res.data.list[i].ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    arr1[i].yiJiaoFeiYong=res.data.list[i].yiJiaoFeiYong
                    arr1[i].keMuMa=res.data.list[i].fenHuYiLiaoFeiYongRiJiZhang.keMuMa
                    arr1[i].zhiChuJinE=res.data.list[i].zhiChuJinE

                }
                console.log(arr1);
                setTableData(arr1)
            }
        })
        .catch((err)=>{
            console.log(err);

        })
        
    }
    const columns = [
        {
            title: "住院号", //列头
            dataIndex: "zhuYuanHao", //数据来源于对象中哪个属性
            key: "zhuYuanHao", //身份识别
            align: 'center',
            width: '10%',
            render: (text, record) => {
                return (
                    <>
                        <Link to={{ pathname: '/zy/Chuyuanbingrenbingli', state: { zhuYuanHao: record.zhuYuanHao } }} >{text}</Link>
                    </>
                )
            }
        },
        {
            title: "姓名", //列头
            dataIndex: "xingMing", //数据来源于对象中哪个属性
            key: "xingMing", //身份识别
            align: 'center',
            width: '10%',
        },
        {
            title: "所属科别", //列头
            dataIndex: "keBie", //数据来源于对象中哪个属性
            key: "keBie", //身份识别
            align: 'center',
            width: '10%',
        },
        {
            title: "收费项目", //列头
            dataIndex: "keMuMa", //数据来源于对象中哪个属性
            key: "keMuMa", //身份识别
            align: 'center',
            width: '10%',
        },
        {
            title: '是否出院',
            dataIndex: 'chuYuanFou',
            filters: [
                { text: '是', value: '1' },
                { text: '否', value: '0' },
            ],
            key: "chuYuanFou",
            width: '10%',
            align: 'center',
            onFilter: (value, record) => {
                // console.log(value, record);
                sessionStorage.setItem("value",JSON.stringify(value))
            }
        },
        {
            title: "已交费用", //列头
            dataIndex: "yiJiaoFeiYong", //数据来源于对象中哪个属性
            key: "yiJiaoFeiYong", //身份识别
            align: 'center',
            width: '10%',
        },
        {
            title: "支出金额", //列头
            dataIndex: "zhiChuJinE", //数据来源于对象中哪个属性
            key: "zhiChuJinE", //身份识别
            align: 'center',
            width: '10%',
            render: (text, record) => {
                return (
                    <>
                        <Link to={{ pathname: '/zy/ChuyuanJinemingxi', state: { zhuYuanHao: record.zhuYuanHao } }} >{text}</Link>
                    </>
                )
            }
        },
        {
            title: "操作",
            dataIndex: 'operation',
            key: 'operation',
            ellipsis: true,
            align: 'center',
            width: "300px",
            render: (text, record) => {
                return (
                    <>
                        {/* <Button onClick={() => { xiuGai(record.zhuYuanHao) }} style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>修改</Button> */}
                        <Button onClick={() => { file(record) }} style={{ backgroundColor: "rgb(133,206,97)", color: "white", marginRight: "20px" }}>归档</Button>
                    </>
                )
            }
        },


    ]
    const [componentSize, setComponentSize] = useState('default');

    const onFormLayoutChange = (changedValues, allValues) => {
        // console.log(allValues);
        setComponentSize(changedValues);
    };
    //单独查询
    const onSearch1 = value => {
        console.log(typeof (value));
        if (value.length != 0) {
            console.log(value)
            axios("/bingRenFeiYong/chaXun", {
                method: "get",
                headers: { "Content-Type": "application/json;charset=UTF-8" },
                params: { xingMing: value }
            })
                .then((res) => {
                    console.log(res);
                    let arr = [{}]
                    arr[0].shouFeiXiangMu = res.data.shouFeiXiangMu[0]
                    arr[0].zhuYuanHao = res.data.ziFeiBingRenZiJinShiYongQingKuang.zhuYuanHao
                    arr[0].xingMing = res.data.ziFeiBingRenZiJinShiYongQingKuang.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    arr[0].chuYuanFou = res.data.ziFeiBingRenZiJinShiYongQingKuang.chuYuanFou
                    arr[0].yiJiaoFeiYong = res.data.ziFeiBingRenZiJinShiYongQingKuang.yiJiaoFeiYong
                    arr[0].zhiChuJinE = res.data.ziFeiBingRenZiJinShiYongQingKuang.zhiChuJinE
                    arr[0].keBie = res.data.ziFeiBingRenZiJinShiYongQingKuang.ruYuanBingRenJiBenZiLiaoDengJi.keBie
                    arr[0].keMuMa=res.data.shouFeiXiangMu[0]
                    arr[0].key = 1
                    console.log(arr);
                    setTableData(arr)
                })
                .catch((err) => {
                    // console.log(err);
                })
        }
        else {
            getTableData(1);
        }
    };
    const onSearch2 = value => {
        console.log(value)
        if (value.length != 0) {
            axios("/bingRenFeiYong/chaXun", {
                method: "get",
                headers: { "Content-Type": "application/json;charset=UTF-8" },
                params: { zhuYuanHao: value }
            })
                .then((res) => {
                    console.log(res);
                    let arr = [{}]
                    arr[0].shouFeiXiangMu = res.data.shouFeiXiangMu[0]
                    arr[0].zhuYuanHao = res.data.ziFeiBingRenZiJinShiYongQingKuang.zhuYuanHao
                    arr[0].xingMing = res.data.ziFeiBingRenZiJinShiYongQingKuang.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
                    arr[0].chuYuanFou = res.data.ziFeiBingRenZiJinShiYongQingKuang.chuYuanFou
                    arr[0].yiJiaoFeiYong = res.data.ziFeiBingRenZiJinShiYongQingKuang.yiJiaoFeiYong
                    arr[0].zhiChuJinE = res.data.ziFeiBingRenZiJinShiYongQingKuang.zhiChuJinE
                    arr[0].keBie = res.data.ziFeiBingRenZiJinShiYongQingKuang.ruYuanBingRenJiBenZiLiaoDengJi.keBie
                    arr[0].keMuMa=res.data.shouFeiXiangMu[0]
                    arr[0].key = 1
                    console.log(arr);
                    setTableData(arr)
                })
                .catch((err) => {
                    // console.log(err);
                })
        }
        else {
            getTableData(1);
        }
    };
    // const onFinish = (value) => {
    //     //查询
    //     console.log(value);
    //     console.log(Object.keys(value).length);
    //     axios("/bingRenFeiYong/chaXun",{
    //         method:"get",
    //         headers: { "Content-Type": "application/json;charset=UTF-8" },
    //         params:{xingMing:value.name,zhuYuanHao:value.zhuyaunid}
    //     })
    //     .then((res)=>{
    //             console.log(res);
    //             let arr=[{}]
    //             arr[0].shouFeiXiangMu=res.data.shouFeiXiangMu[0]
    //             arr[0].zhuYuanHao=res.data.ziFeiBingRenZiJinShiYongQingKuang.zhuYuanHao
    //             arr[0].xingMing=res.data.ziFeiBingRenZiJinShiYongQingKuang.ruYuanBingRenJiBenZiLiaoDengJi.xingMing
    //             arr[0].chuYuanFou=res.data.ziFeiBingRenZiJinShiYongQingKuang.chuYuanFou
    //             arr[0].yiJiaoFeiYong=res.data.ziFeiBingRenZiJinShiYongQingKuang.yiJiaoFeiYong
    //             arr[0].zhiChuJinE=res.data.ziFeiBingRenZiJinShiYongQingKuang.zhiChuJinE
    //             arr[0].keBie=res.data.ziFeiBingRenZiJinShiYongQingKuang.ruYuanBingRenJiBenZiLiaoDengJi.keBie
    //             arr[0].key=1
    //             console.log(arr);
    //             setTableData(arr)
    //     })
    //     .then((err)=>{
    //         // console.log(err);
    //     })
    // }
    //table分页
    const paginationProps = {
        onChange: (page) => {
            getTableData(page);
        },
        pageSize: 10,
        total: JSON.parse(sessionStorage.getItem("count")),
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条数据`,
        position: ["bottomCenter"]
    }
    //Modal:
    //isModalVisible是否可见
    const [isModalVisible, setIsModalVisible] = useState(false);
    //Switch控件变化时，value是ture或false：
    const onSwitchChange = (value) => {
        let gd = Number(value)
        let zhuYuanHao = JSON.parse(sessionStorage.getItem("zhuYuanHao"))
        console.log(gd, zhuYuanHao);
        if (value) {
            //用户点是的时候后端进行归档处理
        }
    }
    const [keyIndex, setKeyIndex] = useState('a');
    return (
        <>
            <Breadcrumb style={{ marginBottom: 24 }}>
                <Breadcrumb.Item>出院管理</Breadcrumb.Item>
                <Breadcrumb.Item>病人费用结算</Breadcrumb.Item>
            </Breadcrumb>
            <div className="site-layout-background" style={{ padding: 24, margin: 12, minHeight: 300 }}>
                <Row>
                    <Col span={3}>
                        <Search
                            placeholder="请输入姓名"
                            // enterButton="查询"
                            onSearch={onSearch1}
                        />
                    </Col>
                    <Col span={3} offset={1}>
                        <Search
                            placeholder="请输入住院号"
                            // enterButton="查询"
                            onSearch={onSearch2}
                        />
                    </Col>

                    {/* <Form
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        layout="inline"
                        initialValues={{
                            size: componentSize,
                        }}
                        onValuesChange={onFormLayoutChange}
                        size={componentSize}
                        onFinish={onFinish}
                    >
                        <Form.Item label="患者姓名：" name="name">
                            <Input
                                placeholder="请输入"
                                width={60}
                            />
                        </Form.Item>
                        <Form.Item label="住院号：" name="zhuyaunid">
                            <Input
                                placeholder="请输入"
                                width={60}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">查询</Button>
                        </Form.Item>
                    </Form> */}
                </Row>
                {/* <Row style={{ marginTop: 20 }}>
                    <Button type="primary" onClick={dayin}>打印</Button>
                </Row> */}
                <Row style={{ marginTop: 20 }}>
                    <Table
                        // rowSelection={{
                        //     type: selectionType,
                        //     ...rowSelection,
                        // }}
                        dataSource={tableData}
                        columns={columns}
                        childrenColumnName
                        bordered
                        onChange={handleTableChange}
                        // rowKey={record => record.login.uuid}
                        // pagination={{
                        //     disabled: false,
                        //     position: pos,
                        //     pageSize: 2,
                        //     current: nowPage,
                        //     onChange: (page, pageSize) => {
                        //         console.log("当前页：", page);
                        //         console.log("pageSize：", pageSize);
                        //         setPage(page);
                        //     },
                        // }}
                        pagination={paginationProps}
                    />
                </Row>
            </div>
            {/* modal框 */}
            <Modal
                title="确认归档"
                visible={isModalVisible}
                onOk={handleOk}
                onCancel={handleCancel}
                okText="确认"
                cancelText="取消"
            >
                <p style={{fontSize:"1.1rem",color:"rgb(56, 56, 56)"}}>是否确认将该病人资料归档？</p>
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 14 }}
                    layout="horizontal"
                    form={form}
                >
                    <Form.Item label="住院号" name="zhuYuanHao">
                        <Input readOnly />
                    </Form.Item>
                    <Form.Item label="姓名" name="xingMing">
                        <Input readOnly />
                    </Form.Item>
                    {/* <p>住院号：{zhuyuanhao}</p>
                    <p>姓名：{name}</p> */}
                </Form>
            </Modal>
        </>

    );
}

export default ChuYuanBingRenXinXi;
